<template xmlns:Say="http://www.w3.org/1999/html">
<div>
  <Header :title="title"></Header>
  <van-divider/>
  <van-search
      v-model="value"
      show-action
      @search="getSayByNameVue"
      placeholder="请输入搜索关键词" />
  <van-divider/>


  <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
  >
<!--    <van-cell-group inset v-for="val in list" :key="val.id">
      <van-cell :title="'留言'+val.id">
      </van-cell>
      <van-cell title="" :label="val.desc" >
      </van-cell>
    </van-cell-group>-->
      <Say :title="'留言'+item.id" :desc="item.desc" v-for="item in list" :key="item.id"></Say>

  </van-list>
</div>
</template>

<script>
import Header from "../components/Header";
import Card from '../components/Card'
import Say from '../components/Say'

import {searchName} from "../utils/api";
import {getCookie} from "../utils/util";
import qs from "qs";

export default {
  name: "Search",
  components: {Header,Card,Say},
  // prop:{
  //   mySayList: {
  //     types: Array,
  //     require: false,
  //     default: () => []
  //   }
  // },
  data(){
    return {
      title: '查看留言',
      value: '',
      loading: false,
      finished: false,
      list:[
        /*{id:1,desc:'中国1'},
        {id:2,desc:'中国2'},
        {id:3,desc:'中国3'},
        {id:4,desc:'中国4'},
        {id:5,desc:'中国5'},*/
      ],
      mySayList:this.$store.getters.getMySayList
    }
  },
  methods:{
    async getSayByNameVue(value){
      this.list = []

      // vue
      console.log('search 组件')
      console.log(this.$store.getters.getMySayList)
      console.log()
      const localMySayList = JSON.parse(localStorage.getItem('mySayList'))
      console.log(value=='')
      if(value==''){
        //1. 没有输入任何值 ，返回数组全部内容
        console.log(localMySayList)
        localMySayList.forEach((item,index)=>{
            const say = {}
            say.id = index + 1
            say.desc = item.desc
            this.list.push(say)
        })
        console.log(this.list)
      }else{
        localMySayList.forEach((item,index)=>{
          console.log(item)
          if(item.name==value){
            const say = {}
            say.id = index + 1
            say.desc = item.desc
            this.list.push(say)
          }
        })
      }


      // java通过姓名查找留言
      // const {data: res} = await searchName(value)
      // res.data.forEach((item,index) => {
      //   const say = {}
      //   say.id = index + 1
      //   say.desc = item.description
      //   this.list.push(say)
      //   console.log(index);
      // })
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 加载状态结束

        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 0) {
          this.finished = true;
        }
      }, 10);
    },
  },
  created() {
  }
}
</script>

<style scoped>

</style>